<template>
  <div class="main-container">
    <el-container>
      <!--侧边栏-->
      <el-aside :width="asideWidth" style="min-height: 100vh; background-color: #001529;">
        <div style="height: 60px;color: white;display: flex;align-items: center;
                justify-content: center;">
          <span class="logo-title" v-show="!isCollapse" style="margin-left: 10px">潮心</span>
        </div>
        <el-menu :collapse="isCollapse" :collapse-transition="false" style="border: none;" :default-active="$route.path"
          background-color="#001529" text-color="rgba(255,255,255,0.65)" active-text-color="#fff" router>
          <el-menu-item index="/home/activity">
            <i class="el-icon-house"></i>
            <span slot="title">活动</span>
          </el-menu-item>
          <el-submenu index="">
            <template slot="title"><i class="el-icon-edit-outline"></i><span>活动记录</span></template>
            <el-menu-item index="/home/recipientRecord">受助记录</el-menu-item>
            <el-menu-item index="/home/activityRecord">会员活动记录</el-menu-item>
          </el-submenu>
          <el-menu-item index="/home/recipient">
            <i class="el-icon-user-solid"></i>
            <span slot="title">受助者</span>
          </el-menu-item>
          <el-menu-item index="/home/category"  v-if="this.$store.state.user.loginUser.role==1 || this.$store.state.user.loginUser.role==2">
            <i class="el-icon-setting"></i>
            <span slot="title">受助类别</span>
          </el-menu-item>
          <el-menu-item index="/home/need">
            <i class="el-icon-message"></i>
            <span slot="title">需求</span>
          </el-menu-item>
          <el-menu-item index="/home/fellow">
            <i class="el-icon-user"></i>
            <span slot="title">会员</span>
          </el-menu-item>
          <el-menu-item index="/home/aichat"  v-if="this.$store.state.user.loginUser.role==1 || this.$store.state.user.loginUser.role==2">
            <i class="ai-icon">
            </i>
            <span slot="title">AI小助手</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container class="right-container">
        <!--头部区域-->
        <el-header class="fixed-header">
          <div style="display: flex; align-items: center; height: 100%;">
            <i :class="collapseIcon" style="font-size: 26px; cursor: pointer;" @click="handleCollapse"></i>
            <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left: 20px;">
              <!-- 原有面包屑导航 -->
              <el-breadcrumb-item :to="toActivity">活动</el-breadcrumb-item>
              <el-breadcrumb-item :to="toRecipientRecord">受助记录</el-breadcrumb-item>
              <el-breadcrumb-item :to="toActivityRecord">会员活动记录</el-breadcrumb-item>
              <el-breadcrumb-item :to="toRecipient">受助者</el-breadcrumb-item>
              <el-breadcrumb-item :to="toCategory" v-if="this.$store.state.user.loginUser.role==1 || this.$store.state.user.loginUser.role==2">受助类别</el-breadcrumb-item>
              <el-breadcrumb-item :to="toNeed">需求</el-breadcrumb-item>
              <el-breadcrumb-item :to="toFellow">会员</el-breadcrumb-item>
              <el-breadcrumb-item :to="toAiChat"  v-if="this.$store.state.user.loginUser.role==1 || this.$store.state.user.loginUser.role==2">AI小助手</el-breadcrumb-item>
            </el-breadcrumb>
          </div>

          <!-- 用户信息区域 -->
          <div style="display: flex; align-items: center; position: absolute; right: 20px; top: 0; height: 100%;">
            <el-dropdown>
              <span style="color: #409EFF; margin-right: 15px; cursor: pointer;">
                <i class="el-icon-user" style="margin-right: 5px;"></i>
                {{ userInfo.name }} ({{ userRole }})
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="logout" style="blue">
                  <i class="el-icon-switch-button"></i> 退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <!--主体区域-->
        <el-main class="no-scroll-main">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import router from '@/router'
import store from '@/store'
import { MessageBox, Message } from 'element-ui'
import service from '@/utils/httpRequest';
export default {
  name: 'home',
  data() {
    return {
      //默认菜单不收缩
      isCollapse: false,
      //侧边栏宽度
      asideWidth: '200px',
      //默认显示图标为收缩图标
      collapseIcon: 'el-icon-s-fold',
    }
  },
  methods: {
    //控制菜单的左右收缩
    handleCollapse() {
      this.isCollapse = !this.isCollapse
      this.asideWidth = this.isCollapse ? '64px' : '200px'
      this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'
    },
    async logout() {
      console.log('logout:  ')
      const confirm = await MessageBox.confirm(' 确定要退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      if (confirm) {
        console.log('logout:   ');
        // 调用退出接口 
        await service({
          url: 'lovehelp/fellow/logout',
          method: 'post'
        });
        // 清除用户信息 
        store.commit('user/updateUser', { userName: "未登录", role: null })
        // 跳转到登录页 

        router.push('/login')
        console.log('logout:  ')
        Message.success('已退出登录')
      }
    }
  },
  computed: {
    toActivity() {
      if (this.$route.path === '/home/activity') {
        return null;
      }
      return '/home/activity';
    },
    toActivityRecord() {
      if (this.$route.path === '/home/activityRecord') {
        return null;
      }
      return '/home/activityRecord';
    },
    toRecipient() {
      if (this.$route.path === '/home/recipient') {
        return null;
      }
      return '/home/recipient';
    },
    toRecipientRecord() {
      if (this.$route.path === '/home/recipientRecord') {
        return null;
      }
      return '/home/recipientRecord';
    },
    toCategory() {
      if (this.$route.path === '/home/category') {
        return null;
      }
      return '/home/category';
    },
    toNeed() {
      if (this.$route.path === '/home/need') {
        return null;
      }
      return '/home/need';
    },
    toFellow() {
      if (this.$route.path === '/home/fellow') {
        return null;
      }
      return '/home/fellow';
    },
    toAiChat() {
      if (this.$route.path === '/home/aichat') {
        return null;
      }
      return '/home/aichat';
    },
    userInfo() {
      return store.state.user.loginUser || { userName: '未知用户', role: null }
    },
    userRole() {
      const roleMap = {
        1: '超级管理员',
        2: '管理员',
        3: '普通用户',
        4: '禁用'
      }
      return roleMap[this.userInfo.role] || '未知角色'
    }



  },
};
router.beforeEach(async (to, from, next) => {
  // 排除登录页自身 
  if (to.path === '/login') return next()

  // 异步获取用户信息 
  await store.dispatch('user/getLoginUser')

  next()

})

</script>
<style scoped>
/* 最外层容器 */
.main-container {
  height: 100vh;
  width: 100vw;
  overflow: auto;
  /* 禁止最外层滚动 */
  display: flex;
}

/* 右侧主内容区 */
.right-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  overflow: auto;
  /* 禁止右侧容器滚动 */
}

/* 头部区域 */
.fixed-header {
  height: 60px !important;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 主体内容区 */
.no-scroll-main {
  flex: 1;
  overflow-y: auto;
  /* 禁止主体区域滚动 */
  padding: 0;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);
  /* 精确计算高度 */
}

/* Element UI 组件样式覆盖 */
.el-container {
  height: 100vh;
  /* overflow: hidden; */
}

.el-main {
  overflow-y: auto;
  padding: 0 !important;
  height: 100%;
}

.el-aside {
  overflow: auto;
  height: 100vh;
}
.ai-icon {
  display: inline-block;
  width: 30px; /* 图片宽度*/
  height: 30px; /* 图片高度 */
  background-image: url('@/assets/ai-icon.svg'); /* 自定义图片路径 */
  background-size: cover; /* 图片覆盖整个区域 */
  margin-right: 8px; /* 与文字的间距 */
}

</style>
